<template>
  <!-- 二手房列表页 -->
  <view class="newhouse-content">
    <!-- 搜索按钮区域 -->
    <view class="homeSearch">
      <my-search></my-search>
    </view>
    <!-- /搜索按钮区域-->
    <!-- 列表区域 -->
    <view class="newhouselist-content">
      <view
        class="newhouselist-item"
        @click="toDetail(item)"
        v-for="(item, index) in ershoufanglistInfo"
        :key="index"
      >
        <houseinfo-list :houseData="item" :housestyle="1"></houseinfo-list>
      </view>
    </view>
    <!-- 列表区域 -->
  </view>
</template>

<script>
export default {
  onLoad() {
    this.getErshouHouseList();
  },
  data() {
    return {
      // 二手房列表信息
      ershoufanglistInfo: [],
      queryObj: {
        pageNo: 1,
        pageSize: 50,
        status: 2,
      },
      total: 0, //总条数
      // 节流阀
      isloading: false,
    };
  },
  methods: {
    // 获取二手房列表数据
    async getErshouHouseList(offRefresh) {
      // 打开节流阀
      this.isloading = true;
      const { data: res } = await uni.$http.get("/house/page", this.queryObj);
      // 关闭节流阀
      this.isloading = false;
      offRefresh && offRefresh();
      this.ershoufanglistInfo = [
        ...this.ershoufanglistInfo,
        ...res.data.records,
      ];
      this.total = res.data.total;
      console.log("打印二手房列表信息", this.ershoufanglistInfo);
    },
    toDetail(obj) {
      uni.navigateTo({
        url: "/subpages/ershouhouse-details/ershouhouse-details?id=" + obj.id,
      });
    },
    // 触底事件
    onReachBottom() {
      // 判断数据是否加载完成
      if (this.queryObj.pageNo * this.queryObj.pageSize >= this.total) {
        return uni.$showMsg("数据加载完成");
      }
      // 根据节流阀，只有当请求到数据后，节流阀才为false才不会return
      if (this.isloading) return;
      // 让页码值自增+1
      this.queryObj.pageNo += 1;
      // 重新拉取数据列表
      this.getErshouHouseList();
    },
    // 下拉刷新
    onPullDownRefresh() {
      // 重置关键数据
      this.queryObj.pageNo = 1;
      this.total = 0;
      this.ershoufanglistInfo = [];
      this.isloading = false;
      // 重新发起请求
      this.getErshouHouseList(() => uni.stopPullDownRefresh());
    },
  },
};
</script>

<style lang="scss" scoped>
.newhouse-content {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f4;
  .homeSearch {
    margin: 25rpx 0 35rpx 0;
  }
  .newhouselist-content {
    width: 90%;
    margin: 0 5%;
    .newhouselist-item {
      width: 100%;
    }
  }
}
</style>
